<template>
	<view class="content">
		<map id="myMap" style="width: 100%;"/>
		
		<view class="input-box">
			<text>经度：</text>
			<input type="number" v-model="longitude" />
		</view>
		
		<view class="input-box">
			<text>纬度：</text>
			<input type="number" v-model="latitude" />
		</view>
		
		<view class="input-box">
			<text>名字：</text>
			<input type="text" v-model="destination" />
		</view>
		
		<button type="default" @click="openMap">打开地图App</button>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				longitude:116.40,
				latitude:39.90,
				destination:'北京'
			}
		},
		mounted() {
			let _this = this;
			
			uni.getLocation({
				success(res) {
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
				}
			})
		},
		methods: {
			openMap(){
				let mapContext = uni.createMapContext("myMap");
				mapContext.openMapApp({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					destination: this.destination,
					success() {
						console.log('success!!');
					},
					fail() {
						console.log('fail!!');
					},
					complete() {
						console.log('complete!!');
					}
				})
			}
		}
	}
</script>
 
<style scoped lang="scss">
	
	.input-box{
		display: flex;
		align-items: center;
		input{
			flex: 1;
			display: inline-block;
			border: 1rpx solid rgba(0,0,0,.2);
			border-radius: 8rpx;
		}
		margin: 30rpx;
	}
	
</style>